<template>
	<div class="app">
		<h2>App Content</h2>
		<div class="nav">
			<!-- replace: 切换路由直接替换, 不会进行历史记录 -->
			<!-- <router-link to="/home" replace>首页</router-link>
			<router-link to="/about" replace>关于</router-link> -->
			<router-link to="/home" active-class="link-active">首页</router-link>
			<router-link to="/about" active-class="link-active">关于</router-link>
			<router-link to="/user/1" active-class="link-active">用户1</router-link>
			<router-link to="/user/11" active-class="link-active">用户11</router-link>
			<router-link to="/order" active-class="link-active">订单</router-link>

			<!-- 其他元素跳转 -->
			<span @click="homeClick">首页</span>
			<span @click="aboutClick">关于</span>

			<button @click="logoutClick">退出登录</button>
		</div>

		<router-view></router-view>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'

	const router = useRouter()

	const logoutClick = () => {
		localStorage.removeItem('token')
		router.push({
			path: '/login',
		})
	}
	const homeClick = () => {
		router.push({
			name: 'home',
		})
	}
	const aboutClick = () => {
		// router.push('/about')

		/* router.push({
			path: '/about',
		}) */

		router.push({
			name: 'about',
			query: {
				name: 'zs',
			},
		})
	}
</script>

<style>
	.link-active {
		font-size: 20px;
		color: red;
	}
</style>
